.search {
 display: flex;
 align-items: center;
 background-color: #fff;
 width: calc(100% - 40px);
 margin: 40px auto 20px;
 padding: 10px 15px;
 border-radius: 40px;
}
.search img {
 width: 20px;
 margin-right: 10px;
}
.search input {
 font-size: 18px;
 flex: 1 1 auto;
 width: 1%;
}
.search button {
 background-color: #2E8CF7;
 color: #fff;
 padding: 5px 15px;
 border-radius: 40px;
 font-size: 15px;
 margin-left: 5px;
}

.empty {
 display: none;
 margin: auto;
}
.empty img {
 width: 10em;
}

.i-close {
 cursor: pointer;
 display: none;
}

.box {
 display: flex;
 flex-direction: column;
}

.list .item {
 cursor: pointer;
}
.item {
 width: calc(100% - 40px);
 margin: 0 auto 20px;
 background-color: #fff;
 border-radius: 8px;
 overflow: hidden;
}
.item_box {
 display: flex;
 align-items: center;
}
.item_box>img {
 width: 20px;
 margin-right: 20px;
}
.item_head {
 background-color: #2E8CF7;
 padding: 10px 15px;
 color: #fff;
 font-size: 15px;
}
.item_content {
 display: flex;
 flex-direction: column;
 padding: 10px;
 flex: 1 1 auto;
 width: 1%;
}
.item_content_time {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
}
.item_content_time p {
 display: flex;
 align-items: center;
 margin-bottom: 5px;
 white-space: nowrap;
 font-size: 15px;
 width: 49%;
}
.item_content_time p:first-child {
 margin-right: 2%;
}
.item_content_class {
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.view {
 display: flex;
 flex-direction: column;
 width: 100%;
}
.view p {
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.view p span {
 width: 48%;
 display: flex;
 align-items: center;
}
.view p:first-child {
 margin-right: 2%;
}
.item_content_class p {
 display: flex;
 align-items: center;
 font-size: 15px;
 margin-bottom: 5px;
}
.view p label,.item_content_time p label {
 width: 80px;
 text-align: right;
}

@media screen and (max-width: 500px){
 .item_content_time p {
  width: 100%;
  margin-right: 0;
 }
}


.details .item_content_class {
 padding-bottom: 10px;
 border-bottom: 1px solid #E6E6E6;
}
.item_edit {
 padding: 20px 0;
}
.item_edit h3 {
 position: relative;
 padding-left: 20px;
 margin-bottom: 20px;
 font-weight: bold;
 font-size: 17px;
}
.item_edit h3:before {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 width: 3px;
 height: 70%;
 background-color: #2E8CF7;
}
.record {
 display: flex;
 flex-direction: column;
 position: relative;
}
.record_item {
 position: relative;
 display: flex;
 align-items: flex-start;
 margin-bottom: 35px;
}
.record_item img {
 width: 20px;
 margin-right: 10px;
 position: relative;
 z-index: 5;
}
.record_item .record_item_text {
 display: flex;
 flex-direction: column;
}
.record_item .record_item_text p {
 margin-bottom: 5px;
 font-size: 15px;
}
.record_item .record_item_text p.situation {
 font-weight: bold;
 font-size: 17px;
}
.record_item.active .record_item_text p.situation {
 color: #2E8CF7
}
.br {
 position: absolute;
 height: 93px;
 width: 1px;
 left: 10px;
 top: 20px;
 background-color: #2E8CF7;
}
